/* eslint-disable @typescript-eslint/restrict-plus-operands */
import React, { FC, useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import style from './header/Header.module.scss'
import { SearchOutlined } from '@ant-design/icons'
import { SideSheet } from '@douyinfe/semi-ui'
import { Input, Cell } from 'react-vant'
import { Button, Empty } from 'antd'
import { getSearch } from '@/api/article'
import { List } from 'tdesign-react'
import { useNavigate } from 'react-router-dom'

const { ListItem } = List
const Search: FC = () => {
  const { t } = useTranslation()
  const [visible, setVisible] = useState(false)
  const change = (): void => {
    setVisible(!visible)
  }
  const [value, setValue] = useState('')
  const [checks, setCheck] = useState([])
  const [checks1, setCheck1] = useState([])
  useEffect(() => {
    getSearch()
      .then(({ data }) => {
        setCheck(data.data)
      })
      .catch((err) => {
        console.log(err)
      })
  }, [])
  const check = (values: any): void => {
    const newchecks = checks.filter((item: any, index: number) => {
      return item.title.includes(values)
    })
    setCheck1(newchecks)
  }
  const navigate = useNavigate()
  const nomask = (item: any): void => {
    navigate('/details/' + item.id, { state: item })
    setVisible(false)
  }
  return (
    <div className="search">
      <div className={style.searchbtn}>
        <SearchOutlined style={{ fontSize: '25px' }} onClick={change} />
      </div>
      <SideSheet
        title={t('search')}
        visible={visible}
        height={'720px'}
        onCancel={change}
        placement={'top'}
        style={{ padding: '0 65px', overflow: 'auto' }}
      >
        <Cell>
          <Input
            style={{ border: 'solid 1px #f5f5f5', height: '60px' }}
            value={value}
            onChange={setValue}
            suffix={
              <Button
                size="small"
                type="primary"
                style={{
                  background: '#fff',
                  color: '#000',
                  border: 'none',
                  height: '60px'
                }}
                onClick={() => check(value)}
              >
                <SearchOutlined />
              </Button>
            }
            placeholder={`${t('article')}`}
          />
        </Cell>
        <List size="large">
          {
            // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
            checks1 && checks1.length > 0
              ? (
                  checks1.map((item: any, index: number) => {
                    return (
                  <ListItem key={item.index}>
                    <Button
                      type="text"
                      style={{ width: '100%', textAlign: 'left' }}
                      onClick={() => nomask(item)}
                    >
                      {item.title}
                    </Button>
                  </ListItem>
                    )
                  })
                )
              : (
              <Empty
                image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
                imageStyle={{
                  height: 60
                }}
                description={<span>{t('nothing')}</span>}
              ></Empty>
                )
          }
        </List>
      </SideSheet>
    </div>
  )
}

export default Search
